<style lang="scss">
page{

  background: #f8f8f8;
}
.page-wrap{
}
.hotel{
  &-list{

  }
  &-item{
    width: 710rpx;
    margin: 0 20rpx 20rpx;
    border-radius: 6px;
    overflow: hidden;
    .thumb{
      width: 710rpx;
      height: 355rpx;
    }

    .price-box{
      padding-top: 0 !important;
    }
  }
}

.new-ul{
  padding: 20rpx;
  .new-li{
    width: 100%;
    padding: 8px 0;
    justify-content: space-between;
    margin: 0;
    .l{
      flex: 1;
      .title{
        color: #222222;
      }
      .create_at{
        color: #999;
      }
    }
    .r{
      width: 220rpx;
      .thumb{
        width: 200rpx;
        height: 134rpx;
        margin: 0 auto;
        border-radius: 5%;
      }
    }

  }
}

.task-ul{
  padding: 20rpx 30rpx;
  background: #f8f8f8;
  .task-li{
    width: 690rpx;
    margin-bottom: 30rpx;
    border-radius: 10rpx;
    overflow: hidden;
    border-bottom: 1px solid $fun-border-color;
    background: #fff;
    @include shadow();
    .thumb{
      height: 300rpx;
      @include cover-img();
    }
    .l{
      padding:30rpx;
      .title{
        color: #222222;
      }
      .create_at{
        /*color: #06A1FB;*/
        color: #999;
      }
    }
    .r{
      padding-left: 30rpx;
      text-align: center;
    }

  }
}

</style>
<template>

  <div class="page-wrap">
    <view class="fun-tab">
      <!--    <view class="fun-tab-title">资讯中心</view>-->
      <view class="fun-tab-nav" :class="{sticky:floorstatus}">
        <view
            @click="changeTab(item.id)"
            v-for="(item,idx) in task_data.types"
            :key="idx"
            class="nav-item"
            :class="{active:item.id == task_data.select_type_id}">{{item.title}}</view>
      </view>
    </view>

    <view class="fun-container task-ul" :class="{sticky:floorstatus}">

      <div class="fun-container " v-if="task_data.list.length>0">
        <navigator v-for="(item,index) in task_data.list" :key="index" :url="'/pages/task/detail?id='+item.id" class="task-li fz-14">
          <div class="thumb" :style="{backgroundImage:'url('+item.thumb+')'}"></div>
          <div class="l">
            <div class="title fz-16 m-b-10">{{item.title}}</div>
            <div class="p-b-10" v-if="item.tags.length>0">
              <u-tag class="m-r-10" v-for="(tag,idx) in item.tags" :type="tag.style" :key="idx" size="mini" shape="circle" :text="tag.text"></u-tag>
            </div>
            <div class="m-b-4 fz-13">
              <span class="c9 m-r-10">达成/目标:</span><span class="color-green">{{item.gain_num}}</span>/<span class="color-red">{{item.require_num}}</span>
            </div>
            <div class="p-b-10">
              <u-line-progress :striped="true" :show-percent="true" active-color="#19be6b" height="24" :percent="item.percent"></u-line-progress>
            </div>

            <div class="fz-12 flex flex-justify-between c7">
              <div>{{item.create_at}}</div>
              <div>{{item.hits}}次浏览</div>
            </div>
          </div>

        </navigator>

      </div>
      <div v-else style="width: 750rpx;">
        <u-empty mode="list" text="暂无项目"></u-empty>
      </div>

<!--      <navigator class="fun-container-item new-li flex fz-14"-->
<!--                 v-for="(item,idx) in task_data.list"-->
<!--                 :key="idx" :url="'/pages/task/detail?id='+item.id">-->
<!--        <view class="l">-->
<!--          <view class="title m-b-8 fz-16">{{item.title}}</view>-->
<!--          <view class="create_at fz-12">{{item.create_at}}</view>-->
<!--        </view>-->
<!--        <view class="r">-->
<!--          <image class="thumb" :src="item.thumb" mode="scaleToFill"   />-->
<!--        </view>-->
<!--      </navigator>-->

    </view>
  </div>

</template>

<script>

import { pageMixin } from '@/mixins'

import { task, tasktype } from '@/api/task'
import { Exception } from '@/common/Exception'
import { error, hideLoading, showLoading } from '@/common/fun'
import store from '@/store'
import UTag from '@/uview-ui/components/u-tag/u-tag'
import UEmpty from '@/uview-ui/components/u-empty/u-empty'
import ULineProgress from '../../uview-ui/components/u-line-progress/u-line-progress'
export default {
  components: {
    ULineProgress,
    UEmpty,
    UTag
  },
  mixins: [pageMixin],
  data () {
    return {
      taskLoading: false,
      city_id: '',
      floorstatus: false,
      task_data: {
        total: 0,
        select_type_id: 1,
        types: [],
        page: 1,
        isFinish: false,
        list: [

        ]

      }
    }
  },
  methods: {
    changeTab (id) {
      if (this.task_data.select_type_id === id) {
        return
      }

      uni.pageScrollTo({
        scrollTop: 0
      })

      this.task_data.page = 1 // 重置
      this.task_data.isFinish = false
      this.task_data.select_type_id = id

      this.loadInfoFunc(id, (res) => {
        this.task_data.list = []
        this.task_data.list = res.data

        // 分页的
        if (parseInt(res.current_page) < res.last_page) {
          this.task_data.page = parseInt(res.current_page) + 1
        } else {
          this.task_data.isFinish = true
        }
      })
    },
    async loadInfoFunc (cate_id, cb) {
      if (this.task_data.isFinish) {
        // error('到底啦')
        return
      };

      showLoading('加载中')

      var params = {
        type_id: cate_id,
        // paginate: 1,
        page: this.task_data.page
      }
      if (this.city_id) {
        params.city_id = this.city_id
      }

      task(params).then(res => {
        this.task_data.total = res.data.total
        var tag_styles = ['primary', 'success', 'warning', 'error', 'info']
        const list = res.data.list.map(row => {
          return {
            ...row,
            percent: row.require_num <= 0 ? 0 : (parseInt(row.gain_num / row.require_num * 100 * 100) / 100),
            tags: row.tags ? row.tags.split('|').map(tag => {
              return { text: tag, style: tag_styles[parseInt(Math.random() * 5)] }
            }) : []
          }
        })
        cb && cb({ data: list })
        hideLoading()
      }).catch(err => {
        hideLoading()
        Exception.handle(err)
      })
    },

    async _init_func () {
      var params = {}
      if (this.city_id) {
        params.city_id = this.city_id
      }
      var ret = await tasktype(params).then(res => res.data.list).catch(err => Exception.handle(err))

      this.task_data.types = ret
      this.task_data.select_type_id = ret[0].id

      this.loadInfoFunc(ret[0].id, (res) => {
        const list = this.task_data.list.concat(res.data)
        this.task_data.list = list

        // 分页的
        if (this.task_data.list.length < this.task_data.total) {
          this.task_data.page++
        } else {
          this.task_data.isFinish = true
        }
      })
    }
  },
  // 加载更多
  onReachBottom () {
    const cate_id = this.task_data.select_type_id

    this.loadInfoFunc(cate_id, (res) => {
      const list = this.task_data.list.concat(res.data)
      this.task_data.list = list

      // 分页的
      if (this.task_data.list.length < this.task_data.total) {
        this.task_data.page++
      } else {
        this.task_data.isFinish = true
      }
    })
  },
  // 获取滚动条当前位置
  onPageScroll (e) {
    // console.log(e)
    if (e.scrollTop > 100) {
      this.floorstatus = true
    } else {
      this.floorstatus = false
    }
  },
  onShareAppMessage () {
    const userInfo = store.getters.getUserInfo(); let path = '/pages/task/index'
    // //加入分享标识
    if (userInfo && userInfo.id) {
      path = path + '?from_mid=' + userInfo.id
    }

    return {
      path
    }
  },
  onLoad (options) {
    this._init_func()
  }
}
</script>
